<template>
  <div class="library-management">
    <NavTop />
    <div class="layout">
      <MySidebar />
      <main class="main-content">
        <div class="content-wrapper">
          <BookBreadcrumb
              v-if="shouldShowBreadcrumb"
              :items="breadcrumbItems"
              class="breadcrumb"
          />

          <div class="router-view-container">
            <router-view v-slot="{ Component, route }">
              <Transition name="fade-slide" mode="out-in">
                <component
                    :is="Component"
                    :key="route.path"
                    :route-data="route"
                    class="page-content"
                />
              </Transition>
            </router-view>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import MySidebar from '@/components/MySidebar.vue';
import BookBreadcrumb from '@/views/Home/components/Breadcrumb/BookBreadcrumb.vue';
import NavTop from "@/components/NavTop.vue";

const route = useRoute();

const breadcrumbItems = computed(() => {
  if (!route?.path) return [];

  const segments = route.path.split('/').filter(Boolean);
  return [
    { name: '首页', path: '/' },
    ...segments.map((segment, index) => ({
      name: route.meta?.breadcrumb?.[index] || segment,
      path: index === segments.length - 1 ? null : `/${segments.slice(0, index + 1).join('/')}`
    }))
  ];
});

const shouldShowBreadcrumb = computed(() => {
  return breadcrumbItems.value.length > 1; // 只有首页时不显示
});
</script>

<style scoped lang="scss">
.library-management {
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --border-color: #f1f5f9;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --radius: 8px;
  --spacing: 24px;
  --mobile-spacing: 16px;

  display: flex;
  flex-direction: column;
  height: 50hv;
  background-color: var(--bg-color);
  overflow: hidden; // 防止外层滚动条
}

.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-color);

  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing);
    gap: 16px;
    overflow-y: auto; // 只有内容区域可滚动

    @media (max-width: 768px) {
      padding: var(--mobile-spacing);
    }
  }

  .breadcrumb {
    background-color: var(--card-bg);
    padding: 12px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    flex-shrink: 0; // 防止压缩
  }

  .router-view-container {
    flex: 1;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    padding: var(--spacing);
    min-height: 0; // 修复Flex滚动问题

    @media (max-width: 768px) {
      padding: var(--mobile-spacing);
    }
  }
}

.fade-slide {
  &-enter-active,
  &-leave-active {
    transition: all 0.3s ease;
  }

  &-enter-from {
    opacity: 0;
    transform: translateY(10px);
  }

  &-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.page-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>